<!-- 
按照配置顺序显示，对应字段意义解析：
"name": 定义有意义的名字
"src": 图片地址
"showType": 1   //1: 单页纯展示类型 2:单页点击跳转 3:单页热区类型 4:轮播图
"linkType": 1, 	//链接类型：  1：内部页面地址
"link": "/pages/login/partner/index" //链接：1 内部页面地址
"authorization": //0 跳转前是否需要授权，只对 showType 为 2， 3， 4生效


* 协议跳转（id为 t_sys_protocol 表里面的id， title 显示在导航栏上的标题）
"link": "/pages/protocol/protocol?id=SCAN_PROTOCOL&title=扫码规则说明",

* 详情页跳转：（id 为商品详情id, 即为： https://kingleber.cn/api/applet/goods/getGoodsById/77d156c40b5011ee982f525400099290 接口请求最后参数id）
"link": "/pages/index/detail?id=1",

JSON格式：
[
    {
        "name": "header",
        "showType": 1,
        "src": "introduce/01.png"
    },
    {
        "name": "ad-carousel",
        "showType": 4,
        "items": [
            {
                "src": "introduce/ad/01.png",
                "linkType": 1,
                "link": "/pages/protocol/protocol?id=SCAN_PROTOCOL&title=扫码规则说明",
                "authorization": 0
            },
            {
                "src": "introduce/ad/02.png",
                "linkType": 1,
                "link": "/pages/index/detail?id=439888e346e311ee982f525400099290",
                "authorization": 0
            },
            {
                "src": "introduce/ad/03.png",
                "linkType": 1,
                "link": "/pages/index/detail?id=77d156c40b5011ee982f525400099290",
                "authorization": 0
            }
        ]
    },
    {
        "name": "priviledge",
        "showType": 3,
        "src": "introduce/02.png",
        "hots": [
            {
                "id": "addMember",
                "x": 40,
                "y": 120,
                "w": 146,
                "h": 214,
                "linkType": 1,
                "link": "/pages/login/index",
                "authorization": 0
            },
            {
                "id": "integral",
                "x": 210,
                "y": 120,
                "w": 146,
                "h": 214,
                "linkType": 1,
                "link": "/packageIntegral/pages/mine/integral/shop",
                "authorization": 0
            },
            {
                "id": "lottery",
                "x": 380,
                "y": 120,
                "w": 146,
                "h": 214,
                "linkType": 1,
                "link": "/pages/turntableLottery/index",
                "authorization": 1
            },
            {
                "id": "aboutUs",
                "x": 560,
                "y": 120,
                "w": 146,
                "h": 214,
                "linkType": 1,
                "link": "/pages/mine/aboutUs",
                "authorization": 0
            }
        ]
    },
    {
        "name": "partner",
        "src": "introduce/03.png",
        "showType": 2,
        "linkType": 1,
        "link": "/pages/login/partner/partner",
        "authorization": 0
    }
]
-->
<template>
	<view>
		<view v-for="(item, index) in introduceDatas" :key="index">
			<!-- 单页纯展示类型  -->
			<template v-if="item.showType === 1">
				<image style="width:100%" :src="item.src" mode="widthFix" @load="(e)=>emitLoadedNonlinkImage(e)">
				</image>
			</template>
			<!-- 单页点击跳转类型  -->
			<template v-if="item.showType === 2">
				<image style="width:100%" :src="item.src" mode="widthFix" @click="(e)=>emitIntroduceLink(e, item)"
					@load="(e)=>emitLoadedLinkImage(e)">
				</image>
			</template>
			<!-- 单页热区类型  -->
			<template v-if="item.showType === 3">
				<image style="width:100%" :src="item.src" mode="widthFix" @click="(e)=>emitIntroduceHot(e, item)"
					@load="(e)=>emitLoadedHotImage(e, item, index)"></image>
			</template>
			<!-- 轮播图类型  -->
			<template v-if="item.showType === 4">
				<x-horizontal-image-scroll :bgImg="item.bgImg" addRandom :imgs="item.items" imgKey="src"
					@loadedImages="(ret)=>emitLoadedCarouselImages(ret.height, ret.width)"
					@click="(index)=>emitIntroduceCarousel(null, item, index)"
					:imageApi="staticUrl"></x-horizontal-image-scroll>
			
			<!-- :src="imageApi + item + (addRandom ? '?'+now : '')"
			:src="`${staticUrl}new_gift/bg.png?n=${curTimestamp}` -->
			<!-- 	<image v-else-if="item.items.length==1" style="width:100%;" :src="`${staticUrl}${item.items[0].src}?n=${now}`" 
				mode="widthFix" @click="()=>emitIntroduceCarousel(null, item, 0)"/> -->
			</template>	
		</view>
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex'
	import XHorizontalImageScroll from "@/components/horizontalImageScroll/xHorizontalImagesScroll.vue"
	export default {
		computed: {
			...mapState(['device', 'userInfo']),
		},
		components: {
			XHorizontalImageScroll
		},
		data() {
			return {
				now:Date.now(),
				staticUrl: this.$Config.staticUrl,
				introduceDatas: [],
				totalIntroduceHeight: 0, //以像素为单位
				offsetTop: 0,
			}
		},
		mounted() {
			this.loadData()
		},
		methods: {
			setOffsetTop(scrollTop){
				this.offsetTop = scrollTop
			},
			refresh(){
				this.loadData()
			},
			loadData() {
				this.totalIntroduceHeight = 0
				this.introduceDatas = []
				uni.request({
					url: this.$Config.staticUrl + 'introduce/introduce.json' + "?" + Date.now(),
					method: "GET",
					success: (res) => {
						if (res && Array.isArray(res.data)) {
							res.data.map(item => {
								return item.src = item.src ? this.$Config.staticUrl + item.src+'?n='+Date.now() : null
							})

							this.introduceDatas = res.data
							console.log("this.introduceData=", this.introduceDatas)
						}
					},
					fail: (error) => {
						console.log("error=", error)
					}
				})
			},

			_loadedImage(adoptHeight, adoptWidth) {
				this.totalIntroduceHeight += adoptHeight
				this.$emit("height", this.totalIntroduceHeight)
			},

			emitLoadedNonlinkImage(e) {
				let imageWidth = e.detail.width
				let imageHeight = e.detail.height
				let rate = this.device.screenWidth * 1.0 / imageWidth
				let adoptHeight = imageHeight * rate
				let adoptWidth = imageHeight * rate
				this._loadedImage(adoptHeight, adoptWidth)
			},
			emitLoadedLinkImage(e) {
				let imageWidth = e.detail.width
				let imageHeight = e.detail.height
				let rate = this.device.screenWidth * 1.0 / imageWidth
				let adoptHeight = imageHeight * rate
				let adoptWidth = imageHeight * rate
				this._loadedImage(adoptHeight, adoptWidth)
			},
			emitLoadedHotImage(e, item, index) {
				let imageWidth = e.detail.width
				let imageHeight = e.detail.height
				let rate = this.device.screenWidth * 1.0 / e.detail.width
				let adoptHeight = imageHeight * rate
				let adoptWidth = imageHeight * rate
				let newHots = item.hots.map(hotItem => {
					return {
						...hotItem,
						ax: hotItem.x * rate,
						ay: hotItem.y * rate,
						aw: hotItem.w * rate,
						ah: hotItem.h * rate,
					}
				})
				item.hots = newHots
				this.introduceDatas.splice(index, 1, item)

				this._loadedImage(adoptHeight, adoptWidth)
			},
			
			emitLoadedCarouselImages(adoptHeight, adoptWidth) {
				this._loadedImage(adoptHeight, adoptWidth)
			},

			emitIntroduceLink(e, item) {
				this._handleIntroduceClick(e, item)
			},

			emitIntroduceHot(e, item) {
				
				this._handleIntroduceClick(e, item)
			},

			emitIntroduceCarousel(e, item, index) {
				this._handleIntroduceClick(e, item, index)
			},

			_handleIntroduceClick(e, item, index) {
				console.log("e=", e, ",item=", item, ",index=", index)
				if (item.showType === 1) {
					// 单页纯展示类型
					//do nothing
				} else if (item.showType === 2) {
					// 单页点击跳转
					this._handleJumpLink(item.authorization, item.linkType, item.link)
				} else if (item.showType === 3) {
					// 单页热区类型
					this._handleHitHotImage(e, item)
				} else if (item.showType === 4) {
					// 轮播图
					let curItem = item.items[index]
					this._handleJumpLink(curItem.authorization, curItem.linkType, curItem.link)
				} else {
					// 暂不支持
				}
			},

			_handleJumpLink(authorization, linkType, link) {
				console.log("_handleJumpLink=", authorization,",this.userInfo=", this.userInfo)
				if(authorization) {
					// 需要授权, 但是又没有用户信息，就需要跳转到登录页面
					if(!this.userInfo)  {
						return uni.navigateTo({
							url: '/pages/login/index'
						})
					}
				}
				if (linkType === 1) {
					// 内部页面地址
					uni.navigateTo({
						url: link
					})
				} else {
					// 暂不支持
				}
			},

			_handleHitHotImage(e, item) {
				let clientX = e.target.x - e.target.offsetLeft
				let clientY = e.target.y - e.target.offsetTop + this.offsetTop
				let hots = item.hots
				for (let i = 0; i < hots.length; ++i) {
					if (clientX >= hots[i].ax && clientX <= hots[i].ax + hots[i].aw &&
						clientY >= hots[i].ay && clientY <= hots[i].ay + hots[i].ah) {
						// 命中热区
						// console.log("hit hot x=", clientX, ",y=", clientY)
						let hotItem = hots[i]
						if (hotItem.linkType === 1) {
							if (hotItem.id === "addMember") {
								// 加入会员
								if (!this.userInfo) {
									uni.navigateTo({
										url: hotItem.link
									})
								} else {
									uni.navigateTo({
										url: '/pages/member/member'
									})
								}
							} else {
								this._handleJumpLink(hotItem.authorization, hotItem.linkType, hotItem.link)
							}

						} else {
							this._handleJumpLink(hotItem.authorization, hotItem.linkType, hotItem.link)
						}
					}
				}
			}
		}
	}
</script>

<style lang="scss" scoped>

</style>